<template>
  <el-container
    class="admin-layout"
    :class="{ 'nav-top': userStore.userInfo.navigation === 'top' }"
  >
    <!-- 侧边栏导航 -->
    <el-aside
      v-if="userStore.userInfo.navigation === 'side'"
      :width="isCollapse ? '64px' : '200px'"
    >
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical"
        :router="true"
        :collapse="isCollapse"
        background-color="var(--admin-menu-bg)"
        text-color="var(--admin-menu-text)"
        active-text-color="var(--admin-primary)"
      >
        <el-menu-item index="/admin/dashboard">
          <el-icon><Monitor /></el-icon>
          <span>仪表盘</span>
        </el-menu-item>
        <el-menu-item index="/admin/products">
          <el-icon><Box /></el-icon>
          <span>产品管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/carousels">
          <el-icon><Picture /></el-icon>
          <span>走马灯管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/website">
          <el-icon><Monitor /></el-icon>
          <span>大屏信息化管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/users">
          <el-icon><User /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/settings">
          <el-icon><Setting /></el-icon>
          <span>系统设置</span>
        </el-menu-item>
        <el-menu-item index="/admin/Info">
          <el-icon><User /></el-icon>
          <span>个人信息</span>
        </el-menu-item>
        <el-menu-item @click="goToWebsite">
          <el-icon><Link /></el-icon>
          <span>访问官网</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <div class="header-left">
          <template v-if="userStore.userInfo.navigation === 'side'">
            <el-button type="text" @click="toggleCollapse">
              <el-icon><Fold v-if="!isCollapse" /><Expand v-else /></el-icon>
            </el-button>
          </template>
          <template v-else>
            <!-- 顶部导航模式下的菜单 -->
            <el-menu
              mode="horizontal"
              :default-active="activeMenu"
              :router="true"
              class="top-menu"
              background-color="transparent"
              text-color="var(--admin-text)"
              active-text-color="var(--admin-primary)"
            >
              <el-menu-item index="/admin/dashboard">
                <el-icon><Monitor /></el-icon>
                仪表盘
              </el-menu-item>
              <el-menu-item index="/admin/products">
                <el-icon><Box /></el-icon>
                产品管理
              </el-menu-item>
              <el-menu-item index="/admin/carousels">
                <el-icon><Picture /></el-icon>
                走马灯管理
              </el-menu-item>
              <el-menu-item index="/admin/website">
                <el-icon><Monitor /></el-icon>
                大屏信息化管理
              </el-menu-item>
              <el-menu-item index="/admin/users">
                <el-icon><User /></el-icon>
                用户管理
              </el-menu-item>
              <el-menu-item index="/admin/settings">
                <el-icon><Setting /></el-icon>
                系统设置
              </el-menu-item>
              <el-menu-item index="/admin/Info">
                <el-icon><User /></el-icon>
                个人信息
              </el-menu-item>
              <el-menu-item @click="goToWebsite">
                <el-icon><Link /></el-icon>
                访问官网
              </el-menu-item>
            </el-menu>
          </template>
        </div>
        <div class="header-right">
          <!-- 语言选择器 -->
          <el-select
            v-model="userStore.userInfo.language"
            @change="userStore.setLanguage"
            size="small"
            class="language-select"
          >
            <el-option label="简体中文" value="zh" />
            <el-option label="English" value="en" />
            <el-option label="日本語" value="ja" />
          </el-select>

          <el-dropdown @command="handleCommand">
            <span class="user-info">
              {{ userStore.userInfo?.username || "用户" }}
              <el-icon><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/store/user";

import {
  Monitor,
  User,
  Setting,
  Fold,
  Expand,
  ArrowDown,
  Link,
  Box,
  Picture,
} from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

const isCollapse = ref(false);
const isReady = ref(false);

const activeMenu = computed(() => route.path);

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

const handleCommand = (command: string) => {
  if (command === "logout") {
    userStore.logout();
    router.push("/login");
  } else if (command === "profile") {
    router.push("/admin/Info");
  }
};

const goToWebsite = () => {
  router.push("/");
};

onMounted(async () => {
  // 等待下一个DOM更新周期
  await nextTick();
  isReady.value = true;
});
</script>

<style scoped lang="scss">
@use "@/styles/variables.scss";

.admin-layout {
  height: 100vh;
  width: 100%;
  display: flex;
  position: relative;
  overflow-x: hidden;
  background-color: var(--admin-bg);
  color: var(--admin-text);

  .el-aside {
    background-color: var(--admin-menu-bg);
    border-right: 1px solid var(--admin-border);
    transition: width 0.3s ease-in-out;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    overflow-y: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

    .el-menu {
      border-right: none;
      height: 100%;
      
      .el-menu-item {
        height: 56px;
        line-height: 56px;
        
        &:hover {
          background-color: var(--admin-menu-hover);
        }

        &.is-active {
          color: var(--admin-primary);
          background-color: var(--admin-menu-hover);
          font-weight: 500;
          
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background-color: var(--admin-primary);
          }
        }
        
        .el-icon {
          margin-right: 12px;
          font-size: 18px;
        }
      }
    }
  }

  .el-container {
    flex: 1;
    min-height: 100vh;
    transition: all 0.3s ease-in-out;
    margin-left: v-bind(
      "isReady && userStore.userInfo.navigation === 'side' ? (isCollapse ? '64px' : '200px') : '0'"
    );
  }

  .el-header {
    background-color: var(--admin-bg);
    border-bottom: 1px solid var(--admin-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: var(--admin-header-height);
    position: fixed;
    top: 0;
    right: 0;
    left: v-bind(
      "isReady && userStore.userInfo.navigation === 'side' ? (isCollapse ? '64px' : '200px') : '0'"
    );
    z-index: 999;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

    .header-left {
      display: flex;
      align-items: center;
      gap: 20px;

      .el-button {
        padding: 0;
        margin-right: 16px;
        color: var(--admin-text);

        &:hover {
          color: var(--admin-primary);
        }
      }

      .top-menu {
        border-bottom: none;
        background-color: transparent;
        
        :deep(.el-menu--horizontal) {
          border-bottom: none;
        }
        
        :deep(.el-menu-item) {
          height: var(--admin-header-height);
          line-height: var(--admin-header-height);
          padding: 0 20px;
          
          .el-icon {
            margin-right: 6px;
            font-size: 16px;
          }
          
          &:hover {
            background-color: var(--admin-menu-hover);
          }
          
          &.is-active {
            color: var(--admin-primary);
            font-weight: 500;
            background-color: var(--admin-menu-hover);
            border-bottom: 2px solid var(--admin-primary);
          }
        }
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 20px;

      .language-select {
        width: 110px;

        :deep(.el-input__wrapper) {
          background-color: var(--admin-bg-secondary);
          box-shadow: 0 0 0 1px var(--admin-border) inset;
          
          &:hover {
            box-shadow: 0 0 0 1px var(--admin-primary) inset;
          }
        }

        :deep(.el-input__inner) {
          color: var(--admin-text);
          font-size: 14px;
        }
      }

      .user-info {
        display: flex;
        align-items: center;
        cursor: pointer;
        color: var(--admin-text);
        padding: 0 12px;
        height: 36px;
        border-radius: 4px;
        transition: background-color 0.3s;
        font-size: 14px;

        &:hover {
          background-color: var(--admin-menu-hover);
        }

        .el-icon {
          margin-left: 5px;
          color: var(--admin-text);
        }
      }
    }
  }

  .el-main {
    background-color: var(--admin-bg-secondary);
    padding: 20px;
    margin-top: var(--admin-header-height);
    min-height: calc(100vh - var(--admin-header-height));
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
  }

  // 顶部导航模式样式
  &.nav-top {
    .el-container {
      margin-left: 0;
    }

    .el-header {
      left: 0;
    }

    .el-main {
      margin-left: 0;
    }
  }
}

// 响应式样式
@media screen and (max-width: 768px) {
  .admin-layout {
    .el-aside {
      transform: translateX(v-bind("isCollapse ? '-100%' : '0'"));
      width: 200px !important;
    }

    .el-container {
      margin-left: 0 !important;
    }

    .el-header {
      left: 0 !important;
      padding: 0 10px;
      
      .header-left {
        .el-button {
          margin-right: 0;
        }
        
        .top-menu {
          :deep(.el-menu-item) {
            padding: 0 10px;
            
            &:not(:first-child) {
              display: none;
            }
          }
        }
      }

      .header-right {
        gap: 10px;
        
        .language-select {
          width: 85px;
        }
        
        .user-info {
          padding: 0 8px;
        }
      }
    }
  }
}
</style>
